<template>
	<view class="home-massage">
		<nav-bar title="上门按摩" backUrl="/pages/index/index" :isTabbar="true" />
		<view class="search-bar">
			<!-- 搜索框移到上面 -->
			<view class="search-input">
				<text class="icon">🔍</text>
				<input type="text" placeholder="搜索技师" v-model="searchText" @input="handleSearch"
					@confirm="handleSearch" />
			</view>
			<!-- 位置信息移到下面 -->
			<view class="location-info">
				<view class="filter-btn" @tap="showSkillFilter">
					<text class="icon">🔍</text>
					<text>技能筛选</text>
				</view>
				<view class="range-select" @tap="showRangeSelect">
					<image class="location-icon" src="/static/icons/location.png"></image>
					<text class="range-text">附近{{ searchRadius }}km</text>
					<text class="arrow-down">▼</text>
				</view>
				<text class="address-text">{{ currentAddress || '定位中...' }}</text>

			</view>
		</view>

		<!-- 视图切换 -->
		<view class="view-switch">
			<view class="switch-item" :class="{ active: viewMode === 'map' }" @tap="switchView('map')">地图</view>
			<view class="switch-item" :class="{ active: viewMode === 'list' }" @tap="switchView('list')">列表</view>
		</view>
		<!-- 地图视图 -->
		<map v-if="viewMode === 'map'" id="tech-map" class="tech-map" :latitude="latitude" :longitude="longitude"
			:markers="allMarkers" :scale="mapScale" :show-location="true" :enable-zoom="true" :enable-scroll="true"
			@markertap="onMarkerTap" @tap="onMapTap">
			<!-- 多个技师卡片 -->
			<view class="tech-cards-container" v-if="selectedTechs && selectedTechs.length > 0">
				<scroll-view class="tech-cards-list" scroll-y="true" :style="{ height: '50vh' }" :scroll-top="scrollTop"
					@scroll="onScroll">
					<view class="tech-card" v-for="tech in selectedTechs" :key="tech.id"
						@tap.stop="bookTechnician(tech)">
						<view class="tech-info">
							<image class="avatar" :src="tech.avatar" mode="aspectFill"></image>
							<view class="info">
								<view class="name-title">
									<text class="name">{{ tech.name }}</text>
									<text class="title">{{ tech.title }}</text>
								</view>
								<view class="rating">
									<text class="score">{{ tech.score }}分</text>
									<text class="orders">已服务{{ tech.orders }}人</text>
								</view>
								<view class="distance">
									<text>距您{{ calculateDistance(tech) }}km</text>
								</view>
							</view>
						</view>
						<button class="book-btn" @tap.stop="bookTechnician(tech)">立即预约</button>
					</view>
				</scroll-view>
			</view>
		</map>
		<!-- 列表视图 -->
		<scroll-view v-else class="tech-list" scroll-y="true" @scrolltolower="loadMoreTechs">
			<view class="tech-item" v-for="tech in Object.values(technicians)" :key="tech.id" @tap="goToDetail(tech)">
				<image class="avatar" :src="tech.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name-title">
						<text class="name">{{ tech.name }}</text>
						<text class="title">{{ tech.title }}</text>
					</view>
					<view class="rating">
						<text class="score">{{ tech.score }}分</text>
						<text class="orders">已服务{{ tech.orders }}人</text>
					</view>
					<view class="distance">
						<text>{{ calculateDistance(tech) }}km</text>
					</view>
				</view>
				<view class="action">
					<button class="book-btn" @tap.stop="bookTechnician(tech)">预约</button>
				</view>
			</view>
		</scroll-view>
		<!-- 自定义距离选择弹出层 -->
		<view class="range-popup-mask" v-if="showRangePopup" @tap="closeRangeSelect">
			<view class="range-popup" @tap.stop>
				<view class="popup-header">
					<text class="title">选择搜索范围</text>
					<text class="close" @tap="closeRangeSelect">×</text>
				</view>
				<view class="range-list">
					<view class="range-item" v-for="range in ranges" :key="range"
						:class="{ active: searchRadius === range }" @tap="selectRange(range)">
						<text>{{ range }}km</text>
						<text class="check" v-if="searchRadius === range">✓</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 技能筛选弹出层 -->
		<view class="skill-popup-mask" v-if="showSkillPopup" @tap="closeSkillFilter">
			<view class="skill-popup" @tap.stop>
				<view class="popup-header">
					<text class="title">技能筛选</text>
					<text class="close" @tap="closeSkillFilter">×</text>
				</view>
				<!-- 已选择的技能显示 -->
				<view class="selected-skills" v-if="selectedSkillNames.length > 0">
					<text class="selected-title">已选择：</text>
					<view class="selected-tags">
						<view class="skill-tag" v-for="(skillName, index) in selectedSkillNames" :key="'tag-' + index"
							@tap="removeSelectedSkill(skillName)">
							<text>{{ skillName }}</text>
							<text class="remove">×</text>
						</view>
					</view>
				</view>
				<!-- 树形技能列表 -->
				<view class="skill-tree-list">
					<view class="tree-tips">
						<text>点击分类名称展开/收起，点击右侧选择按钮进行选择</text>
					</view>
					<!-- 调试信息 -->
					<view class="debug-info" v-if="skillList.length === 0">
						<text>暂无技能数据，请检查网络连接</text>
					</view>
					<view class="debug-info" v-else-if="firstLevelSkills.length === 0">
						<text>暂无一级技能分类</text>
					</view>
					<!-- 一级分类 -->
					<view class="skill-tree-item level-1" v-for="firstSkill in firstLevelSkills"
						:key="'first-' + firstSkill.id">
						<view class="skill-item-content">
							<view class="skill-left" @tap="toggleExpand('first', firstSkill.id)">
								<text class="expand-icon" :class="{ expanded: isExpanded('first', firstSkill.id) }">
									{{ getChildrenSkills(firstSkill.id, 2).length > 0 ? '▶' : '●' }}
								</text>
								<text class="skill-name">{{ firstSkill.categoryName }}</text>
							</view>
							<view class="skill-right" v-if="getChildrenSkills(firstSkill.id, 2).length === 0">
								<button class="select-btn" :class="{ selected: selectedSkills.includes(firstSkill.id) }"
									@tap="toggleSkillSelection(firstSkill)">
									{{ selectedSkills.includes(firstSkill.id) ? '已选' : '选择' }}
								</button>
							</view>
						</view>

						<!-- 二级分类 -->
						<view class="skill-children level-2"
							v-if="isExpanded('first', firstSkill.id) && getChildrenSkills(firstSkill.id, 2).length > 0">
							<view class="skill-tree-item" v-for="secondSkill in getChildrenSkills(firstSkill.id, 2)"
								:key="'second-' + secondSkill.id">
								<view class="skill-item-content">
									<view class="skill-left" @tap="toggleExpand('second', secondSkill.id)">
										<text class="expand-icon"
											:class="{ expanded: isExpanded('second', secondSkill.id) }">
											{{ getChildrenSkills(secondSkill.id, 3).length > 0 ? '▶' : '●' }}
										</text>
										<text class="skill-name">{{ secondSkill.categoryName }}</text>
									</view>
									<view class="skill-right" v-if="getChildrenSkills(secondSkill.id, 3).length === 0">
										<button class="select-btn"
											:class="{ selected: selectedSkills.includes(secondSkill.id) }"
											@tap="toggleSkillSelection(secondSkill)">
											{{ selectedSkills.includes(secondSkill.id) ? '已选' : '选择' }}
										</button>
									</view>
								</view>

								<!-- 三级分类 -->
								<view class="skill-children level-3"
									v-if="isExpanded('second', secondSkill.id) && getChildrenSkills(secondSkill.id, 3).length > 0">
									<view class="skill-tree-item"
										v-for="thirdSkill in getChildrenSkills(secondSkill.id, 3)"
										:key="'third-' + thirdSkill.id">
										<view class="skill-item-content">
											<view class="skill-left" @tap="toggleExpand('third', thirdSkill.id)">
												<text class="expand-icon"
													:class="{ expanded: isExpanded('third', thirdSkill.id) }">
													{{ getChildrenSkills(thirdSkill.id, 4).length > 0 ? '▶' : '●' }}
												</text>
												<text class="skill-name">{{ thirdSkill.categoryName }}</text>
											</view>
											<view class="skill-right"
												v-if="getChildrenSkills(thirdSkill.id, 4).length === 0">
												<button class="select-btn"
													:class="{ selected: selectedSkills.includes(thirdSkill.id) }"
													@tap="toggleSkillSelection(thirdSkill)">
													{{ selectedSkills.includes(thirdSkill.id) ? '已选' : '选择' }}
												</button>
											</view>
										</view>
										<!-- 四级分类 -->
										<view class="skill-children level-4"
											v-if="isExpanded('third', thirdSkill.id) && getChildrenSkills(thirdSkill.id, 4).length > 0">
											<view class="skill-tree-item"
												v-for="fourthSkill in getChildrenSkills(thirdSkill.id, 4)"
												:key="'fourth-' + fourthSkill.id">
												<view class="skill-item-content">
													<view class="skill-left">
														<text class="expand-icon">●</text>
														<text class="skill-name">{{ fourthSkill.categoryName }}</text>
													</view>
													<view class="skill-right">
														<button class="select-btn"
															:class="{ selected: selectedSkills.includes(fourthSkill.id) }"
															@tap="toggleSkillSelection(fourthSkill)">
															{{ selectedSkills.includes(fourthSkill.id) ? '已选' : '选择' }}
														</button>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="popup-footer">
					<button class="reset-btn" @tap="resetSkills">重置</button>
					<button class="confirm-btn" @tap="confirmSkills">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/nav-bar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				searchText: '',
				latitude: 39.908692,
				longitude: 116.397477,
				searchRadius: 15,
				ranges: [1, 5, 10, 15, 20, 25, 30, 35],
				markers: [],
				selectedTechs: [], // 存储选中的多个技师
				technicians: {},
				loading: false,
				techMarkerIcon: {
					width: 40,
					height: 40,
					iconPath: '/static/icons/location.png',
					anchor: {
						x: 0.5,
						y: 1
					}
				},
				locationMarker: {
					id: 0,
					width: 20,
					height: 20,
					iconPath: '/static/icons/location.png',
					anchor: {
						x: 0.5,
						y: 0.5
					},
					callout: {
						content: '当前位置',
						color: '#FFFFFF',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#FF0000',
						padding: 4,
						display: 'ALWAYS'
					}
				},
				currentAddress: '', // 当前位置地址
				isFiltering: false,
				showRangePopup: false, // 控制弹出层显示
				viewMode: 'map', // 视图模式：map/list
				wxJssdkReady: false, // 微信JSSDK是否已准备好
				wxJssdkInitAttempts: 0, // 初始化尝试次数
				jWeixin: null, // 存储jweixin-module实例
				showSkillPopup: false, // 控制技能筛选弹出层显示
				skillList: [], // 技能列表
				selectedSkills: [], // 已选择的技能ID列表
				isAllSelected: false, // 是否全选
				scrollTop: 0,
				mapScale: 10, // 添加地图缩放比例
				isIOS: false,
				currentFirstSkillIndex: 0, // 当前一级技能索引
				currentSecondSkillIndex: -1, // 当前二级技能索引
				currentThirdSkillIndex: -1, // 当前三级技能索引
				selectedSkillNames: [], // 已选择的技能名称列表
				expandedCategories: {} // 记录展开状态的对象
			}
		},

		computed: {
			// 合并技师标记和当前位置标记
			allMarkers() {
				const currentLocationMarker = {
					...this.locationMarker,
					latitude: this.latitude,
					longitude: this.longitude
				}
				return [currentLocationMarker, ...this.markers]
			},

			// 一级技能菜单列表
			firstLevelSkills() {
				return this.skillList.filter(item => item.level === 1 && item.status === 1)
					.sort((a, b) => a.sortOrder - b.sortOrder)
			},

			// 二级技能菜单列表
			secondLevelSkills() {
				if (!this.firstLevelSkills.length || this.currentFirstSkillIndex < 0) return []
				const currentFirst = this.firstLevelSkills[this.currentFirstSkillIndex]
				if (!currentFirst) return []
				return this.skillList.filter(item =>
					item.level === 2 &&
					item.parentId === currentFirst.id &&
					item.status === 1
				).sort((a, b) => a.sortOrder - b.sortOrder)
			},

			// 三级技能菜单列表
			thirdLevelSkills() {
				if (!this.secondLevelSkills.length || this.currentSecondSkillIndex < 0) return []
				const currentSecond = this.secondLevelSkills[this.currentSecondSkillIndex]
				if (!currentSecond) return []

				return this.skillList.filter(item =>
					item.level === 3 &&
					item.parentId === currentSecond.id &&
					item.status === 1
				).sort((a, b) => a.sortOrder - b.sortOrder)
			},

			// 当前选中的技能ID
			currentSelectedSkillId() {
				if (!this.firstLevelSkills.length || this.currentFirstSkillIndex < 0) return null

				// 如果选择了三级菜单
				if (this.thirdLevelSkills.length &&
					this.currentThirdSkillIndex >= 0 &&
					this.thirdLevelSkills[this.currentThirdSkillIndex]) {
					return this.thirdLevelSkills[this.currentThirdSkillIndex].id
				}
				// 如果选择了二级菜单
				else if (this.secondLevelSkills.length &&
					this.currentSecondSkillIndex >= 0 &&
					this.secondLevelSkills[this.currentSecondSkillIndex]) {
					return this.secondLevelSkills[this.currentSecondSkillIndex].id
				}
				// 如果只选择了一级菜单
				else if (this.firstLevelSkills[this.currentFirstSkillIndex]) {
					return this.firstLevelSkills[this.currentFirstSkillIndex].id
				}
				return null
			}
		},

		onLoad() {
			const res = uni.getSystemInfoSync();
			console.log('设备型号：', res.model);
			console.log('系统版本：', res.system);
			// iOS 首次进入自动刷新
			// this.isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
			// if (this.isIOS && !sessionStorage.getItem('iosRefreshed_homeMassage')) {
			// 	sessionStorage.setItem('iosRefreshed_homeMassage', 'true');
			// 	window.location.reload();
			// 	return;
			// }
			// 先获取位置，位置获取成功后会调用 searchNearbyTechnicians
			this.getLocation()
			// 加载技能列表
			this.loadSkillList()
			// 直接调用搜索附近技师
			this.searchNearbyTechnicians()
		},
		onShow() {},
		mounted() {
			// 检测是否在微信环境中
			const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent);
			if (isWeixinBrowser) {
				// 初始化微信JSSDK
				this.initWechatJssdk();
			}
		},

		methods: {
			// 跳转到技师详情
			goToDetail(tech) {
				uni.navigateTo({
					url: `/pages/technician-detail/technician-detail?id=${tech.id}`
				})
			},
			// 搜索处理
			handleSearch(e) {
				// 不再需要设置 queryParams，直接调用加载方法
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				this.searchTimer = setTimeout(() => {
					this.mockFetchNearbyTechs()
				}, 300) // 300ms 后执行搜索
			},

			// 获取位置
			async getLocation() {
				if (this.loading) return
				this.loading = true
				uni.showLoading({
					title: '获取位置中...'
				})

				try {
					// 获取当前页面URL
					const currentUrl = window.location.href.split('#')[0]

					// 获取jssdk配置
					const configRes = await uni.request({
						url: `${uni.$config.baseUrl}/wx/jssdk/config`,
						method: 'GET',
						data: {
							url: currentUrl
						}
					})

					if (configRes.statusCode === 200 && configRes.data.code === 200) {
						const config = configRes.data.data

						// 加载jweixin-module
						this.jWeixin = require('jweixin-module')

						// 配置微信JSSDK
						this.jWeixin.config({
							debug: false,
							appId: config.appId,
							timestamp: config.timestamp,
							nonceStr: config.nonceStr,
							signature: config.signature,
							jsApiList: ['getLocation', 'openLocation']
						})

						// 使用微信JSSDK获取位置
						this.jWeixin.ready(() => {
							this.jWeixin.getLocation({
								type: 'gcj02',
								success: (res) => {
									console.log('微信定位成功:', res)

									// 更新位置
									this.latitude = res.latitude
									this.longitude = res.longitude

									// 添加当前位置标记
									this.markers = [{
										id: 0,
										latitude: res.latitude,
										longitude: res.longitude,
										width: 20,
										height: 20,
										iconPath: '/static/icons/location.png',
										anchor: {
											x: 0.5,
											y: 0.5
										},
										callout: {
											content: '当前位置',
											color: '#FFFFFF',
											fontSize: 12,
											borderRadius: 4,
											bgColor: '#FF0000',
											padding: 4,
											display: 'ALWAYS'
										}
									}]

									// 获取地址信息
									this.getLocationAddress(res.latitude, res.longitude)

									// 搜索附近技师
									this.searchNearbyTechnicians()
								},
								fail: () => {
									this.currentAddress = '定位失败'
									// 如果微信定位失败，尝试使用IP定位
									this.getLocationByIP()
								}
							})
						})

						this.jWeixin.error((err) => {
							// 如果微信JSSDK配置失败，尝试使用IP定位
							this.getLocationByIP()
						})
					} else {
						// 如果获取配置失败，尝试使用IP定位
						this.getLocationByIP()
					}
				} catch (error) {
					// 如果加载jweixin-module失败，尝试使用IP定位
					this.getLocationByIP()
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},

			// 使用IP定位
			async getLocationByIP() {
				try {
					const res = await uni.request({
						url: `${uni.$config.baseUrl}/map/location/v1/ip`,
						method: 'GET',
						data: {
							key: 'GJZBZ-5ZV6G-ID2QK-Q6ODP-WNIPQ-HZFB4'
						}
					})

					if (res.statusCode === 200 && res.data.code === 200) {
						const result = res.data.data

						// 更新位置
						this.latitude = result.location.lat
						this.longitude = result.location.lng

						// 添加当前位置标记
						this.markers = [{
							id: 0,
							latitude: result.location.lat,
							longitude: result.location.lng,
							width: 20,
							height: 20,
							iconPath: '/static/icons/location.png',
							anchor: {
								x: 0.5,
								y: 0.5
							},
							callout: {
								content: '当前位置',
								color: '#FFFFFF',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#FF0000',
								padding: 4,
								display: 'ALWAYS'
							}
						}]

						// 获取地址信息
						await this.getLocationAddress(result.location.lat, result.location.lng)

						// 搜索附近技师
						this.searchNearbyTechnicians()
					} else {
						console.error('IP定位失败:', res.data)
						this.currentAddress = '定位失败'
						this.useDefaultLocation()
					}
				} catch (err) {
					console.error('IP定位请求失败:', err)
					this.currentAddress = '定位失败'
					this.useDefaultLocation()
				}
			},

			// 获取地址信息
			getLocationAddress(latitude, longitude) {
				// 调用后端逆地址解析接口
				uni.request({
					url: `${uni.$config.baseUrl}/map/geocoder/v1/reverse`,
					method: 'GET',
					data: {
						location: `${latitude},${longitude}`,
						key: 'GJZBZ-5ZV6G-ID2QK-Q6ODP-WNIPQ-HZFB4'
					},
					success: (res) => {
						if (res.data.code === 200) {
							const result = res.data.data;
							const addressComponent = result.address_component;

							// 获取区县和街道信息
							const city = addressComponent.city || '';
							const district = addressComponent.district || '';
							const street = addressComponent.street || '';

							// 显示区+路名
							if (street) {
								this.currentAddress = `${city}${district}${street}`;
							} else {
								this.currentAddress = district || '未知位置';
							}
						} else {
							console.error('反向地理编码失败:', res.data);
							this.currentAddress = '获取地址失败';
						}
					},
					fail: (err) => {
						console.error('请求反向地理编码API失败:', err);
						this.currentAddress = '获取地址失败';
					}
				});
			},

			// 使用默认位置
			useDefaultLocation() {
				uni.showToast({
					title: '无法获取位置，使用默认位置',
					icon: 'none',
					duration: 2000
				})
				this.latitude = 39.909177 // 默认使用北京坐标
				this.longitude = 116.397451
				this.currentAddress = '北京市'

				// 添加默认位置标记
				this.markers = [{
					id: 0,
					latitude: this.latitude,
					longitude: this.longitude,
					width: 20,
					height: 20,
					iconPath: '/static/icons/location.png',
					anchor: {
						x: 0.5,
						y: 0.5
					},
					callout: {
						content: '当前位置',
						color: '#FFFFFF',
						fontSize: 12,
						borderRadius: 4,
						bgColor: '#FF0000',
						padding: 4,
						display: 'ALWAYS'
					}
				}]

				// 使用默认位置后也要搜索附近技师
				this.searchNearbyTechnicians()
			},

			// 初始化微信JSSDK
			initWechatJssdk() {
				console.log('开始初始化微信JSSDK');

				// 先检查是否已经初始化
				if (this.wxJssdkReady) {
					console.log('微信JSSDK已经初始化，不再重复初始化');
					return;
				}

				// 判断是否为开发环境
				const isDev = process.env.NODE_ENV === 'development';

				// 开发环境下直接进入配置阶段
				if (isDev) {
					console.log('开发环境，直接进入配置阶段');
					this.configWechatJssdk();
					return;
				}

				// 记录初始化尝试次数
				this.wxJssdkInitAttempts = this.wxJssdkInitAttempts || 0;
				this.wxJssdkInitAttempts++;

				// 如果尝试次数过多，使用本地位置
				if (this.wxJssdkInitAttempts > 3) {
					console.warn(`已尝试初始化 ${this.wxJssdkInitAttempts} 次，切换到默认位置`);
					this.useDefaultLocation();
					return;
				}

				// 加载jweixin-module
				this.loadWechatJSSdkScript();
			},

			// 加载微信JSSDK脚本
			loadWechatJSSdkScript() {
				try {
					// 使用require加载jweixin-module
					this.jWeixin = require('jweixin-module');
					console.log('成功加载jweixin-module');
					this.configWechatJssdk();
				} catch (error) {
					console.error('加载jweixin-module失败:', error);
					uni.showToast({
						title: '加载微信SDK失败',
						icon: 'none',
						duration: 2000
					});
					this.useDefaultLocation();
				}
			},

			// 配置微信JSSDK
			async configWechatJssdk() {
				try {
					console.log('开始配置微信JSSDK');

					// 判断是否为开发环境
					const isDev = process.env.NODE_ENV === 'development';
					console.log('当前环境:', isDev ? '开发环境' : '生产环境');

					if (isDev) {
						// 开发环境 - 使用简化的测试流程
						console.log('开发环境，使用固定测试数据，不调用实际接口');

						// 确保jWeixin对象存在
						if (!this.jWeixin) {
							console.log('开发环境中jWeixin对象不存在，创建模拟对象');
							// 创建一个简单的模拟jWeixin对象
							this.jWeixin = {
								config: function(opts) {
									console.log('模拟jWeixin.config调用:', opts);
									const self = this;
									setTimeout(() => {
										if (typeof self.readyCallback === 'function') {
											self.readyCallback();
										}
									}, 500);
								},
								ready: function(callback) {
									console.log('模拟jWeixin.ready设置');
									this.readyCallback = callback;
								},
								error: function(callback) {
									console.log('模拟jWeixin.error设置');
									// 开发模式下不触发错误
								},
								getLocation: function(opts) {
									console.log('模拟jWeixin.getLocation调用');
									if (opts && opts.success) {
										opts.success({
											latitude: 39.90923,
											longitude: 116.397428,
											speed: 0,
											accuracy: 10
										});
									}
								},
								openLocation: function(opts) {
									console.log('模拟jWeixin.openLocation调用');
									if (opts && opts.success) opts.success({});
								},
								chooseLocation: function(opts) {
									console.log('模拟jWeixin.chooseLocation调用');
									if (opts && opts.success) {
										opts.success({
											latitude: 39.90923,
											longitude: 116.397428,
											name: '测试位置',
											address: '北京市测试地址'
										});
									}
								}
							};
						}

						// 固定的测试配置
						const testConfig = {
							debug: true,
							appId: 'wxee39deb8d9fd37e3',
							timestamp: '' + Math.floor(Date.now() / 1000),
							nonceStr: 'test_nonce_str_' + Math.random().toString(36).substr(2, 8),
							signature: 'test_signature_' + Math.random().toString(36).substr(2, 8),
							jsApiList: [
								'getLocation',
								'openLocation',
								'chooseLocation'
							]
						};

						console.log('使用测试配置调用jWeixin.config:', testConfig);

						// 设置ready回调
						this.jWeixin.ready(() => {
							console.log('jWeixin.ready触发 - 测试模式');
							this.wxJssdkReady = true;
							uni.showToast({
								title: '测试模式：JSSDK初始化成功',
								icon: 'none',
								duration: 1500
							});
						});

						// 调用config
						this.jWeixin.config(testConfig);

						return;
					}

					// 生产环境下获取配置并调用真实API
					const url = location.href.split('#')[0];
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/wx/jssdk/config`,
						method: 'GET',
						data: {
							url
						}
					});

					if (!result.data || result.data.code !== 200) {
						throw new Error(result.data ? result.data.msg || '获取JSSDK配置失败' : '获取JSSDK配置失败');
					}

					const config = result.data.data;

					this.jWeixin.config({
						debug: false,
						appId: config.appId,
						timestamp: config.timestamp,
						nonceStr: config.nonceStr,
						signature: config.signature,
						jsApiList: ['getLocation', 'openLocation', 'chooseLocation']
					});

					this.jWeixin.ready(() => {
						console.log('微信JSSDK初始化成功');
						this.wxJssdkReady = true;
						// uni.showToast({
						// 	title: 'JSSDK初始化成功',
						// 	icon: 'none',
						// 	duration: 1500
						// });
					});

					this.jWeixin.error((error) => {
						console.error('微信JSSDK初始化失败:', error);
						this.wxJssdkReady = false;
						uni.showToast({
							title: 'JSSDK初始化失败',
							icon: 'none',
							duration: 1500
						});
						// 使用默认位置
						this.useDefaultLocation();
					});
				} catch (error) {
					console.error('配置微信JSSDK失败:', error);
					uni.showToast({
						title: 'JSSDK初始化失败: ' + error.message,
						icon: 'none',
						duration: 3000
					});

					// 延迟后尝试重新加载JSSDK
					setTimeout(() => {
						console.log('尝试重新加载微信JSSDK...');
						this.initWechatJssdk();
					}, 3000);
				}
			},

			// 显示距离选择弹窗
			showRangeSelect() {
				this.showRangePopup = true
			},

			// 关闭距离选择弹窗
			closeRangeSelect() {
				this.showRangePopup = false
			},

			// 选择搜索范围
			async selectRange(range) {
				if (this.searchRadius === range) {
					this.closeRangeSelect()
					return
				}

				this.searchRadius = range
				this.closeRangeSelect()
				// 将地图中心点设置为当前位置
				this.updateMapCenter()
				// 根据搜索半径动态调整地图缩放比例
				this.adjustMapScale()

				// 添加筛选动画效果
				this.isFiltering = true
				await this.searchNearbyTechnicians()
				setTimeout(() => {
					this.isFiltering = false
				}, 300)


			},

			// 加载技能列表
			loadSkillList() {
				uni.request({
					url: `${uni.$config.baseUrl}/category/category/listAll`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							this.skillList = res.data.rows || []

							// 使用nextTick确保computed属性已经计算完成
							this.$nextTick(() => {
								// 初始化菜单状态
								if (this.firstLevelSkills.length > 0) {
									this.currentFirstSkillIndex = 0
									// 如果一级菜单下有二级菜单，不自动选择二级菜单
									if (this.secondLevelSkills.length > 0) {
										this.currentSecondSkillIndex = -1
									} else {
										this.currentSecondSkillIndex = 0
									}
									// 如果二级菜单下有三级菜单，不自动选择三级菜单
									if (this.thirdLevelSkills.length > 0) {
										this.currentThirdSkillIndex = -1
									} else {
										this.currentThirdSkillIndex = 0
									}
								}
							})
						} else {
							uni.showToast({
								title: res.data.msg || '获取技能列表失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.error('获取技能列表失败:', err)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
					}
				})
			},

			// 显示技能筛选
			showSkillFilter() {
				this.showSkillPopup = true
			},

			// 关闭技能筛选
			closeSkillFilter() {
				this.showSkillPopup = false
			},

			// 切换一级技能菜单
			switchFirstSkill(index) {
				this.currentFirstSkillIndex = index
				this.currentSecondSkillIndex = -1
				this.currentThirdSkillIndex = -1

				// 如果一级菜单下有二级菜单，不自动选择
				if (this.secondLevelSkills.length > 0) {
					this.currentSecondSkillIndex = -1
				} else {
					// 如果没有二级菜单，直接添加一级菜单到选择列表
					this.addSkillToSelected()
				}
			},

			// 切换二级技能菜单
			switchSecondSkill(index) {
				this.currentSecondSkillIndex = index
				this.currentThirdSkillIndex = -1

				// 如果二级菜单下有三级菜单，不自动选择
				if (this.thirdLevelSkills.length > 0) {
					this.currentThirdSkillIndex = -1
				} else {
					// 如果没有三级菜单，直接添加二级菜单到选择列表
					this.addSkillToSelected()
				}
			},

			// 切换三级技能菜单
			switchThirdSkill(index) {
				this.currentThirdSkillIndex = index
				// 添加三级菜单到选择列表
				this.addSkillToSelected()
			},

			// 添加技能到已选择列表
			addSkillToSelected() {
				const currentSkillId = this.currentSelectedSkillId
				if (!currentSkillId) return

				// 获取当前选中的技能对象
				let selectedSkill = null
				if (this.thirdLevelSkills.length && this.currentThirdSkillIndex >= 0) {
					selectedSkill = this.thirdLevelSkills[this.currentThirdSkillIndex]
				} else if (this.secondLevelSkills.length && this.currentSecondSkillIndex >= 0) {
					selectedSkill = this.secondLevelSkills[this.currentSecondSkillIndex]
				} else if (this.firstLevelSkills.length && this.currentFirstSkillIndex >= 0) {
					selectedSkill = this.firstLevelSkills[this.currentFirstSkillIndex]
				}

				if (!selectedSkill) return

				// 检查是否已经选择过
				const isAlreadySelected = this.selectedSkills.includes(currentSkillId)
				const isNameAlreadySelected = this.selectedSkillNames.includes(selectedSkill.categoryName)

				if (!isAlreadySelected && !isNameAlreadySelected) {
					this.selectedSkills.push(currentSkillId)
					this.selectedSkillNames.push(selectedSkill.categoryName)
				}
			},

			// 移除已选择的技能
			removeSelectedSkill(skillName) {
				const index = this.selectedSkillNames.indexOf(skillName)
				if (index !== -1) {
					this.selectedSkillNames.splice(index, 1)

					// 同时从selectedSkills中移除对应的ID
					const skill = this.skillList.find(item => item.categoryName === skillName)
					if (skill) {
						const skillIdIndex = this.selectedSkills.indexOf(skill.id)
						if (skillIdIndex !== -1) {
							this.selectedSkills.splice(skillIdIndex, 1)
						}
					}
				}
			},
			// 切换全选状态（保留，但不在新界面中使用）
			toggleSelectAll() {
				this.isAllSelected = !this.isAllSelected;
				if (this.isAllSelected) {
					// 全选：将所有技能ID添加到selectedSkills
					this.selectedSkills = this.skillList.map(skill => skill.id);
				} else {
					// 取消全选：清空selectedSkills
					this.selectedSkills = [];
				}
			},
			// 切换技能选择状态（保留，但不在新界面中使用）
			toggleSkill(skillId) {
				const index = this.selectedSkills.indexOf(skillId)
				if (index === -1) {
					this.selectedSkills.push(skillId)
				} else {
					this.selectedSkills.splice(index, 1)
				}
				// 更新全选状态
				this.isAllSelected = this.selectedSkills.length === this.skillList.length;
			},
			// 重置技能选择
			resetSkills() {
				this.selectedSkills = []
				this.selectedSkillNames = []
				this.isAllSelected = false
				this.currentFirstSkillIndex = 0
				this.currentSecondSkillIndex = -1
				this.currentThirdSkillIndex = -1
			},
			// 确认技能筛选
			async confirmSkills() {
				this.closeSkillFilter()
				// 添加筛选动画效果
				this.isFiltering = true
				await this.searchNearbyTechnicians()
				setTimeout(() => {
					this.isFiltering = false
				}, 300)
				// 将地图中心点设置为当前位置
				this.updateMapCenter()
			},
			// 更新地图中心点
			updateMapCenter() {
				// 使用 nextTick 确保在 DOM 更新后执行
				this.$nextTick(() => {
					// 获取地图上下文
					const mapContext = uni.createMapContext('tech-map', this)
					// 将地图中心点设置为当前位置
					mapContext.moveToLocation({
						latitude: this.latitude,
						longitude: this.longitude,
						success: () => {
						},
						fail: (err) => {
						}
					})
				})
			},
			// 调整地图缩放比例
			adjustMapScale() {
				let scale = 15
				for(let i = 1;i <= 45;i === 1 ? i = 5 : i += 5) {
					if(this.searchRadius <= i) {
						this.mapScale = scale
						break
					}
					scale--
				}
				if (!this.mapScale) {
					this.mapScale = 5
				}
			},
			// 修改搜索附近技师方法
			async searchNearbyTechnicians() {
				if (this.loading) return
				this.loading = true
				try {
					const nearbyTechs = await this.mockFetchNearbyTechs()
					// 添加筛选动画
					if (this.isFiltering) {
						this.markers = this.markers.map(marker => ({
							...marker,
							alpha: 0.5,
							width: this.techMarkerIcon.width * 0.8,
							height: this.techMarkerIcon.height * 0.8
						}))
						await new Promise(resolve => setTimeout(resolve, 200))
					}
					this.technicians = {}
					this.markers = []
					// 筛选在搜索范围内的技师
					let filteredTechs = nearbyTechs.filter(tech => {
						const distance = this.calculateDistance(tech)
						return parseFloat(distance) <= this.searchRadius
					})
					// 如果有选择技能，进行技能筛选
					if (this.selectedSkills.length > 0) {
						filteredTechs = filteredTechs.filter(tech => {
							// 处理技师技能ID，确保是数组格式
							let techSkills = [];
							if (typeof tech.categoryIds === 'string') {
								// 如果是字符串，按逗号分割
								techSkills = tech.categoryIds.split(',').filter(id => id);
							} else if (Array.isArray(tech.categoryIds)) {
								// 如果已经是数组，直接使用
								techSkills = tech.categoryIds;
							}
							// 检查技师是否拥有任何选中的技能
							return this.selectedSkills.some(skillId =>
								techSkills.includes(skillId.toString())
							);
						})
					}
					// 处理重叠位置的技师
					const positionGroups = new Map(); // 用于存储相同位置的技师组
					filteredTechs.forEach((tech) => {
						this.technicians[tech.id] = tech;
						// 生成位置键，用于判断位置是否相同
						const positionKey = `${tech.latitude.toFixed(6)},${tech.longitude.toFixed(6)}`;
						if (!positionGroups.has(positionKey)) {
							positionGroups.set(positionKey, []);
						}
						positionGroups.get(positionKey).push(tech);
					});
					// 为每个位置组创建一个标记
					positionGroups.forEach((techs, positionKey) => {
						const [latitude, longitude] = positionKey.split(',').map(Number);
						const firstTech = techs[0];
						// 创建标记
						const marker = {
							id: firstTech.id,
							latitude: latitude,
							longitude: longitude,
							width: this.techMarkerIcon.width,
							height: this.techMarkerIcon.height,
							iconPath: this.techMarkerIcon.iconPath,
							anchor: this.techMarkerIcon.anchor,
							callout: {
								content: techs.length > 1 ?
									`${techs.length}位技师（点击查看）` : `${firstTech.name}（点击查看）`,
								color: '#333333',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#FFFFFF',
								padding: 4,
								display: 'ALWAYS'
							},
							// 存储该位置的所有技师ID
							techIds: techs.map(tech => tech.id)
						};
						this.markers.push(marker);
					});
					// 如果没有找到符合条件的技师，显示提示
					if (filteredTechs.length === 0) {
						uni.showToast({
							title: `附近${this.searchRadius}km内暂无技师`,
							icon: 'none',
							duration: 2000
						})
					}
				} catch (error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			// 获取附近技师数据
			mockFetchNearbyTechs() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `${uni.$config.baseUrl}/technician/technician/listAll`,
						method: 'GET',
						data: {
							isDisplay: 1,
							workStatus: 1,
							name: this.searchText
						},
						success: (res) => {
							if (res.statusCode === 200 && res.data && res.data.code === 200) {
								const techList = res.data.rows || []
								// 处理技师数据
								const techs = techList.map(tech => ({
									id: tech.id,
									name: tech.name || '未知技师',
									title: tech.technicianType || '专业技师',
									score: tech.score || 4.5,
									orders: tech.appointmentCount || 0,
									avatar: tech.avatar || 'https://picsum.photos/200/200',
									latitude: tech.latitude || this.latitude,
									longitude: tech.longitude || this.longitude,
									categoryIds: tech.categoryIds || []
								}))
								resolve(techs)
							} else {
								uni.showToast({
									title: res.data.msg || '获取技师列表失败',
									icon: 'none'
								})
								resolve([])
							}
						},
						fail: (err) => {
							uni.showToast({
								title: '网络请求失败，请检查网络',
								icon: 'none'
							})
							resolve([])
						}
					})
				})
			},
			// 修改点击标记的处理方法
			onMarkerTap(e) {
				// 忽略当前位置标记（ID为0）
				if (e.detail.markerId === 0) {
					return
				}
				// 获取点击的标记
				const marker = this.markers.find(m => m.id === e.detail.markerId);
				if (!marker) return;
				// 获取该位置的所有技师
				if (marker.techIds && marker.techIds.length > 0) {
					this.selectedTechs = marker.techIds.map(id => this.technicians[id]);
					console.log('找到多个重叠技师:', this.selectedTechs);
				} else {
					// 如果没有techIds，尝试通过markerId查找单个技师
					const tech = this.technicians[e.detail.markerId];
					if (tech) {
						this.selectedTechs = [tech];
					}
				}
			},
			// 计算两点之间的距离（单位：千米）
			calculateDistanceBetweenPoints(lat1, lon1, lat2, lon2) {
				const R = 6371 // 地球半径，单位km
				const dLat = (lat2 - lat1) * Math.PI / 180
				const dLon = (lon2 - lon1) * Math.PI / 180
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2)
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
				return R * c
			},
			// 添加地图点击事件处理，用于隐藏技师卡片
			onMapTap() {
				this.selectedTechs = []
			},
			// 预约按钮点击处理
			bookTechnician(tech) {
				// 获取技师信息
				const technicianInfo = tech || this.selectedTechs[0]
				if (!technicianInfo) {
					uni.showToast({
						title: '请选择技师',
						icon: 'none'
					})
					return
				}
				// 构建跳转参数，包含技师的完整信息
				const params = {
					techId: technicianInfo.id,
					techName: technicianInfo.name,
					techTitle: technicianInfo.title,
					techScore: technicianInfo.score,
					techOrders: technicianInfo.orders,
					techAvatar: technicianInfo.avatar,
					techLatitude: technicianInfo.latitude,
					techLongitude: technicianInfo.longitude,
					categoryIds: technicianInfo.categoryIds,
					// 添加当前用户位置信息
					userLatitude: this.latitude,
					userLongitude: this.longitude,
					userAddress: this.currentAddress
				}
				// 构建查询字符串
				const queryString = Object.keys(params)
					.map(key => `${key}=${encodeURIComponent(params[key] || '')}`)
					.join('&')

				uni.navigateTo({
					url: `/pages/tech-detail/tech-detail?${queryString}`
				})
			},
			// 切换视图模式
			switchView(mode) {
				this.viewMode = mode
				this.selectedTechs = []
				this.searchNearbyTechnicians()
			},
			// 计算与技师的距离
			calculateDistance(tech) {
				const R = 6371 // 地球半径，单位km
				const dLat = (tech.latitude - this.latitude) * Math.PI / 180
				const dLon = (tech.longitude - this.longitude) * Math.PI / 180
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.latitude * Math.PI / 180) * Math.cos(tech.latitude * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2)
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
				const distance = R * c
				return distance.toFixed(1)
			},

			// 加载更多技师
			loadMoreTechs() {
				// 这里可以实现加载更多的逻辑
				console.log('加载更多技师')
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},

			// 切换展开/收起状态
			toggleExpand(level, id) {
				const key = `${level}_${id}`
				this.$set(this.expandedCategories, key, !this.expandedCategories[key])
			},

			// 检查是否展开
			isExpanded(level, id) {
				const key = `${level}_${id}`
				return !!this.expandedCategories[key]
			},

			// 获取子级技能
			getChildrenSkills(parentId, level) {
				return this.skillList.filter(skill =>
					skill.parentId === parentId &&
					skill.level === level &&
					skill.status === 1
				).sort((a, b) => a.sortOrder - b.sortOrder)
			},

			// 切换技能选择状态
			toggleSkillSelection(skill) {
				const index = this.selectedSkills.indexOf(skill.id)
				const nameIndex = this.selectedSkillNames.indexOf(skill.categoryName)

				if (index !== -1) {
					// 取消选择
					this.selectedSkills.splice(index, 1)
					if (nameIndex !== -1) {
						this.selectedSkillNames.splice(nameIndex, 1)
					}
				} else {
					// 添加选择
					this.selectedSkills.push(skill.id)
					this.selectedSkillNames.push(skill.categoryName)
				}
			}
		}
	}
</script>

<style lang="scss">
	.home-massage {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #F8F8F8;

		.search-bar {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.search-input {
				display: flex;
				align-items: center;
				background: #F5F5F5;
				padding: 20rpx 24rpx;
				border-radius: 40rpx;
				margin-bottom: 20rpx;
				transition: all 0.3s ease;

				&:focus-within {
					background: #FFFFFF;
					box-shadow: 0 0 0 2rpx rgba(0, 178, 106, 0.2);
				}

				.icon {
					margin-right: 12rpx;
					font-size: 32rpx;
					color: #999;
				}

				input {
					flex: 1;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.location-info {
				display: flex;
				align-items: center;

				.range-select {
					display: flex;
					align-items: center;
					padding: 12rpx 20rpx;
					background: #F5F5F5;
					border-radius: 30rpx;
					transition: all 0.3s ease;

					&:active {
						background: #EEEEEE;
					}

					.location-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						flex-shrink: 0;
					}

					.range-text {
						font-size: 28rpx;
						color: #333;
						margin-right: 6rpx;
					}

					.arrow-down {
						font-size: 24rpx;
						color: #666;
					}
				}

				.filter-btn {
					display: flex;
					align-items: center;
					padding: 12rpx 24rpx;
					background: #00B26A;
					border-radius: 30rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					transition: all 0.3s ease;
					margin-left: 20rpx;

					.icon {
						margin-right: 8rpx;
						font-size: 24rpx;
					}

					&:active {
						background: #00A55E;
						transform: scale(0.98);
					}
				}

				.address-text {
					font-size: 28rpx;
					color: #666;
					margin-left: 20rpx;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.view-switch {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.switch-item {
				padding: 12rpx 36rpx;
				font-size: 30rpx;
				color: #666;
				position: relative;
				transition: all 0.3s ease;

				&.active {
					color: #00B26A;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						left: 36rpx;
						right: 36rpx;
						bottom: -20rpx;
						height: 4rpx;
						background: #00B26A;
						border-radius: 4rpx;
						box-shadow: 0 2rpx 4rpx rgba(0, 178, 106, 0.2);
					}
				}

				&:active {
					opacity: 0.8;
				}
			}
		}

		.filter-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.range-select {
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;
				background: #F5F5F5;
				border-radius: 30rpx;
				transition: all 0.3s ease;

				&:active {
					background: #EEEEEE;
				}

				.location-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}

				.range-text {
					font-size: 28rpx;
					color: #333;
					margin-right: 6rpx;
				}

				.arrow-down {
					font-size: 24rpx;
					color: #666;
				}
			}

			.filter-btn {
				display: flex;
				align-items: center;
				padding: 12rpx 24rpx;
				background: #FF9500;
				border-radius: 30rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				transition: all 0.3s ease;

				.icon {
					margin-right: 8rpx;
					font-size: 24rpx;
				}

				&:active {
					background: #E68600;
					transform: scale(0.98);
				}
			}
		}

		.tech-map {
			flex: 1;
			width: 100%;
			height: calc(100vh - 180rpx);
		}

		.tech-cards-container {
			position: fixed;
			left: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 16rpx;
			padding: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
			z-index: 1000;
			pointer-events: auto;

			.tech-cards-list {
				width: 100%;
				height: 50vh;
				pointer-events: auto;

				.tech-card {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 16rpx;
					margin-bottom: 16rpx;
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
					pointer-events: auto;

					&:last-child {
						margin-bottom: 0;
					}

					.tech-info {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						pointer-events: none;

						.avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
							margin-right: 16rpx;
							border: 2rpx solid #FFFFFF;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
						}

						.info {
							flex: 1;
							pointer-events: none;

							.name-title {
								margin-bottom: 8rpx;

								.name {
									font-size: 28rpx;
									color: #333;
									font-weight: 600;
									margin-right: 8rpx;
								}

								.title {
									font-size: 22rpx;
									color: #666;
									background: #F5F5F5;
									padding: 2rpx 12rpx;
									border-radius: 16rpx;
								}
							}

							.rating {
								font-size: 22rpx;

								.score {
									color: #FF9500;
									margin-right: 16rpx;
									font-weight: 500;
								}

								.orders {
									color: #666;
								}
							}

							.distance {
								font-size: 22rpx;
								color: #666;
								margin-top: 8rpx;
							}
						}
					}

					.book-btn {
						background: linear-gradient(135deg, #00B26A, #00A55E);
						color: #FFFFFF;
						font-size: 24rpx;
						padding: 12rpx 32rpx;
						border-radius: 32rpx;
						margin: 0;
						box-shadow: 0 4rpx 12rpx rgba(0, 178, 106, 0.2);
						transition: all 0.3s ease;
						pointer-events: auto;

						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 8rpx rgba(0, 178, 106, 0.2);
						}
					}
				}
			}
		}

		.tech-list {
			flex: 1;
			background: #F8F8F8;
			padding: 20rpx 20rpx 20rpx 20rpx;
			height: calc(100vh - 180rpx);
			box-sizing: border-box;
			overflow: hidden;

			.tech-item {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				padding: 24rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;

				&:last-child {
					margin-bottom: 0;
				}

				&:active {
					transform: scale(0.98);
					background: #F9F9F9;
				}

				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 70rpx;
					margin-right: 24rpx;
					border: 4rpx solid #FFFFFF;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				}

				.info {
					flex: 1;
					margin-right: 24rpx;

					.name-title {
						margin-bottom: 12rpx;

						.name {
							font-size: 32rpx;
							color: #333;
							font-weight: 600;
							margin-right: 12rpx;
						}

						.title {
							font-size: 26rpx;
							color: #666;
							background: #F5F5F5;
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
						}
					}

					.rating {
						margin-bottom: 12rpx;
						font-size: 26rpx;

						.score {
							color: #FF9500;
							margin-right: 20rpx;
							font-weight: 500;
						}

						.orders {
							color: #666;
						}
					}

					.distance {
						font-size: 26rpx;
						color: #666;
						margin-top: 8rpx;
					}
				}

				.action {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0; // 防止按钮被压缩

					.book-btn {
						background: linear-gradient(135deg, #00B26A, #00A55E);
						color: #FFFFFF;
						font-size: 26rpx;
						padding: 12rpx 32rpx;
						border-radius: 30rpx;
						margin: 0;
						box-shadow: 0 4rpx 12rpx rgba(0, 178, 106, 0.2);
						transition: all 0.3s ease;
						border: none; // 移除默认边框

						&:active {
							transform: scale(0.95);
							box-shadow: 0 2rpx 8rpx rgba(0, 178, 106, 0.2);
						}
					}
				}
			}
		}
	}

	.range-popup-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		display: flex;
		align-items: flex-end;
		backdrop-filter: blur(4px);

		.range-popup {
			width: 100%;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0 0;
			padding: 36rpx;
			transform: translateY(0);
			animation: slideUp 0.3s ease;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 36rpx;

				.title {
					font-size: 34rpx;
					color: #333;
					font-weight: 600;
				}

				.close {
					font-size: 44rpx;
					color: #999;
					padding: 10rpx;
					transition: all 0.3s ease;

					&:active {
						opacity: 0.7;
					}
				}
			}

			.range-list {
				.range-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 0;
					font-size: 32rpx;
					color: #333;
					border-bottom: 1rpx solid #EEEEEE;
					transition: all 0.3s ease;

					&.active {
						color: #00B26A;
						font-weight: 500;
					}

					.check {
						color: #00B26A;
						font-weight: bold;
					}

					&:active {
						background: #F8F8F8;
					}
				}
			}
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.tech-marker {
		transition: all 0.3s ease;
	}

	.skill-popup-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999;
		display: flex;
		align-items: flex-end;
		backdrop-filter: blur(4px);

		.skill-popup {
			width: 100%;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0 0;
			padding: 36rpx;
			transform: translateY(0);
			animation: slideUp 0.3s ease;
			box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);

			.popup-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.title {
					font-size: 34rpx;
					color: #333;
					font-weight: 600;
				}

				.close {
					font-size: 44rpx;
					color: #999;
					padding: 10rpx;
					transition: all 0.3s ease;

					&:active {
						opacity: 0.7;
					}
				}
			}

			.skill-menu-container {
				padding: 0 0 20rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 20rpx;

				.skill-menu-tabs {
					padding: 20rpx 0;

					&.second-level {
						background: #F8F8F8;
						padding: 16rpx 0;
						margin: 12rpx -36rpx 0;
						padding-left: 36rpx;
						padding-right: 36rpx;

						.skill-menu-item {
							font-size: 28rpx;
							padding: 12rpx 24rpx;

							&.active {
								color: #00B26A;
								font-weight: 600;

								&::after {
									width: 32rpx;
									height: 4rpx;
									background: #00B26A;
								}
							}
						}
					}

					&.third-level {
						background: #F5F5F5;
						padding: 14rpx 0;
						margin: 12rpx -36rpx 0;
						padding-left: 36rpx;
						padding-right: 36rpx;

						.skill-menu-item {
							font-size: 26rpx;
							padding: 10rpx 20rpx;

							&.active {
								color: #00B26A;
								font-weight: 600;

								&::after {
									width: 28rpx;
									height: 3rpx;
									background: #00B26A;
								}
							}
						}
					}

					.skill-menu-list {
						display: flex;
						padding: 0 20rpx;

						.skill-menu-item {
							padding: 16rpx 28rpx;
							font-size: 30rpx;
							color: #333;
							position: relative;
							white-space: nowrap;
							transition: all 0.3s ease;
							border-radius: 20rpx;
							margin-right: 12rpx;

							&.active {
								color: #00B26A;
								font-weight: 600;
								background: rgba(0, 178, 106, 0.1);

								&::after {
									content: '';
									position: absolute;
									left: 50%;
									bottom: -2rpx;
									transform: translateX(-50%);
									width: 40rpx;
									height: 4rpx;
									background: #00B26A;
									border-radius: 2rpx;
								}
							}

							&:active {
								opacity: 0.7;
								transform: scale(0.98);
							}
						}
					}
				}
			}

			.selected-skills {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 20rpx;

				.selected-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 16rpx;
				}

				.selected-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;

					.skill-tag {
						display: flex;
						align-items: center;
						padding: 8rpx 16rpx;
						background: linear-gradient(135deg, #00B26A, #00A55E);
						color: #FFFFFF;
						border-radius: 20rpx;
						font-size: 26rpx;
						font-weight: 500;
						transition: all 0.3s ease;
						box-shadow: 0 2rpx 8rpx rgba(0, 178, 106, 0.2);

						&:active {
							transform: scale(0.95);
							box-shadow: 0 1rpx 4rpx rgba(0, 178, 106, 0.1);
						}

						text {
							&:first-child {
								margin-right: 8rpx;
							}
						}

						.remove {
							font-size: 20rpx;
							color: rgba(255, 255, 255, 0.8);
							background: rgba(255, 255, 255, 0.2);
							border-radius: 50%;
							width: 24rpx;
							height: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 8rpx;
							transition: all 0.3s ease;

							&:active {
								background: rgba(255, 255, 255, 0.3);
								transform: scale(0.9);
							}
						}
					}
				}
			}

			.skill-tree-list {
				max-height: 60vh;
				overflow-y: auto;
				padding: 0 0 20rpx 0;

				.tree-tips {
					padding: 12rpx 0;
					margin-bottom: 16rpx;

					text {
						font-size: 24rpx;
						color: #999;
						line-height: 1.4;
					}
				}

				.debug-info {
					padding: 40rpx 0;
					text-align: center;

					text {
						font-size: 28rpx;
						color: #999;
					}
				}

				.skill-tree-item {
					&.level-1 {
						margin-bottom: 8rpx;

						.skill-item-content {
							background: #F8F8F8;
							border-radius: 12rpx;

							.skill-name {
								font-weight: 600;
								font-size: 32rpx;
							}
						}
					}

					.skill-item-content {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 16rpx 20rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						margin-bottom: 4rpx;
						transition: all 0.3s ease;

						&:active {
							background: #F9F9F9;
						}

						.skill-left {
							flex: 1;
							display: flex;
							align-items: center;

							.expand-icon {
								width: 32rpx;
								height: 32rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								color: #666;
								margin-right: 12rpx;
								transition: all 0.3s ease;

								&.expanded {
									transform: rotate(90deg);
									color: #00B26A;
								}
							}

							.skill-name {
								font-size: 30rpx;
								color: #333;
								flex: 1;
							}
						}

						.skill-right {
							.select-btn {
								padding: 8rpx 20rpx;
								border-radius: 20rpx;
								font-size: 26rpx;
								background: #F5F5F5;
								color: #666;
								border: none;
								transition: all 0.3s ease;

								&.selected {
									background: linear-gradient(135deg, #00B26A, #00A55E);
									color: #FFFFFF;
									box-shadow: 0 2rpx 8rpx rgba(0, 178, 106, 0.2);
								}

								&:active {
									transform: scale(0.95);
								}
							}
						}
					}

					.skill-children {
						padding-left: 24rpx;
						margin-top: 8rpx;

						&.level-2 {
							.skill-item-content {
								background: #FAFAFA;

								.skill-name {
									font-size: 28rpx;
									color: #555;
								}
							}
						}

						&.level-3 {
							padding-left: 48rpx;

							.skill-item-content {
								background: #F5F5F5;

								.skill-name {
									font-size: 26rpx;
									color: #777;
								}
							}
						}

						&.level-4 {
							padding-left: 72rpx;

							.skill-item-content {
								background: #F0F0F0;

								.skill-name {
									font-size: 24rpx;
									color: #888;
								}
							}
						}
					}
				}
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;
				padding-top: 36rpx;
				border-top: 1rpx solid #EEEEEE;

				button {
					flex: 1;
					margin: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					border-radius: 40rpx;
					transition: all 0.3s ease;

					&.reset-btn {
						background: #F5F5F5;
						color: #666;
						border: none;

						&:active {
							background: #EEEEEE;
						}
					}

					&.confirm-btn {
						background: linear-gradient(135deg, #00B26A, #00A55E);
						color: #FFFFFF;
						border: none;
						box-shadow: 0 4rpx 12rpx rgba(0, 178, 106, 0.2);

						&:active {
							transform: scale(0.98);
							box-shadow: 0 2rpx 8rpx rgba(0, 178, 106, 0.2);
						}
					}
				}
			}
		}
	}
</style>